<template>
          <div class="box">
                <div class="tab">
                  <van-nav-bar title="题库选择"  left-arrow @click-left="onClickLeft" @click-right="onClickRight">
                    <template #right>
                      <van-icon name="search" size="18" />
                    </template>
                  </van-nav-bar>
                </div>

                <div class="type">
                  <div class="types" @click="type">
                    <span>类型不限</span>
                    <span class="sjx" v-if="!show"></span>
                    <span class="sjx2" v-if="show"></span>
                  </div>
                  <div>巩固全部错题</div>
                  <div>移除错题</div>
                </div>
            <van-action-sheet v-model="show" :actions="actions" @select="onSelect" class="content"/>

            <van-empty
                class="custom-image"
                image="https://wap.365msmk.com/img/empty.0d284c2e.png"
                description="暂无错题记录"
            />
          </div>
</template>

<script>
export default {
 data(){
   return{
      show:false,
     actions: [{ name: '全部' }, { name: '套卷练习' }, { name: '专点专练' },{ name: '仿真模考' }],
   }
 },
  methods:{
    onClickLeft(){
        this.$router.push('/Practice')
    },
    onClickRight(){
     this.$router.push('/search')
    },
    type(){
        this.show=true
    },
    onSelect(){
      this.show=false
    }
  }
}
</script>

<style scoped lang="scss">
.type{
  width: 100%;
  height: 42px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 15px;
  .types{
    display: flex;
    align-items: center;
  }
  .sjx{
    margin-top: 12px;
    width: 0;
    border: 10px solid grey;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }
  .sjx2{
    margin-top: 2px;
    width: 0;
    border: 10px solid red;
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    //border-bottom: 10px solid transparent;
  }
}
.content {
  position: fixed;
  top:120px;
  height: 180px;
}
</style>